body {
  background: url("whitepolka.jpeg");
  background-size: 100%;
}

html {
  overflow: scroll;
  overflow-x: hidden;
}

.scene {
  position: relative;
  width: 500px;
  height: 500px;
  }

.bag {
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.bag:hover { transform: translate(-50%, -50%) scale(1.04); }
.bag:active { transform: translate(-50%, -50%) scale(0.97); }

img {
  width: 28%;
}

.object {
  opacity: 0;
  --tx: 0px; --ty: 0px; --s: 0.3;
  transform: translate(-50%, -50%) translate(var(--tx), var(--ty)) scale(var(--s));
  transition: transform 0.5s ..., opacity 0.35s ease;
  pointer-events: none;
}

.scene.open .object {
  opacity: 1;
  pointer-events: auto;
  --s: 1;
}
  
.obj1 { --tx: -160px; --ty: -140px; }
.obj2 { --tx: 140px;  --ty: -120px; }
.obj3 { --tx: -170px; --ty: 100px;  }
.obj4 { --tx: 160px;  --ty: 130px;  }
.obj5 { --tx: 10px;   --ty: -190px; }
.obj6 { --tx: 10px;   --ty: -190px; }
.obj7 { --tx: 10px;   --ty: -190px; }
  
.scene.open .object:hover {
  --s: 1.1;
  filter: brightness(1.15);
}

.tooltip {
    position: absolute;
    bottom: 115%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: #1e1e1e;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .object:hover .tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }